<template>
  <div class="detail">
    <!-- 顶端大图 -->
    <div class="topPic">
      <div>
        <div @click="back()" class="iconfont ret icon-fanhui"></div>
        <div class="top">
          <img src="../../public/imgs/detail3.jpg" />
        </div>
        <div class="text">长隆野生动物世界（AAAAA景区）</div>
      </div>
    </div>
    <!-- 位置 -->
    <div>
      <div class="position">
        <span class="iconfont mark icon-wxbdingwei"></span>
        <span>广州市海珠区阅江西路222号</span>
        <span class="icon-arrow-right fl iconfont"></span>
      </div>
    </div>
    <div class="gray"></div>
    <div class="say">
      <van-notice-bar
        left-icon="volume-o"
        text="尊敬的游客您好！疫情防控须知：疫情防控期间，请您在进入景区前佩戴口罩，主动出示健康码、行程码，配合景区工作人员做好体温检测及实名登记工作。疫情风险区域及其所在城市来客请留意广州防疫部门疫情防控要求，建议您出行前致电4008830083或您将入住的酒店查询，及时了解最 新防疫政策，做好出行规划。由此给您带来不便敬请谅解。"
      />
    </div>
    <!-- <div class="say">
            <span class="iconfont icon-zizhutuiguang"></span>
            <span> 尊敬的游客您好！疫情防控须知：疫情防控期间，请您在进入园区前进行网上预约，佩戴口罩，主动出示健康码、行程码，配合景区工作人员做好入园体温检测及实名登记工作。疫情风险区域及其所在城市来客请留意广州防疫部门疫情防控要求，建议您出行前致电4008830083或您将入住的酒店查询，及时了解最 新防疫政策，做好出行规划。由此给您带来不便敬请谅解。</span>
        </div>
        <div class="gray"></div> -->
    <!-- 门票 -->
    <div class="sell">
      <div class="sellTitle">景区门票</div>
      <div class="cards">
        <div class="card" v-for="(item, index) in cards" :key="index">
          <div class="left">
            <div>{{ item.cardName }}</div>
            <div class="down">
              <span>条件退</span>
              <span>无需换票</span>
            </div>
          </div>
          <div class="right">
            <div class="prize">
              <span class="rmb">￥</span>
              <span>{{ item.prize }}</span>
            </div>
            <div @click="pay(index)" class="server">
              <div>立即预定</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { cardName: "433米白云星空成人观光票", prize: "150" },
        { cardName: "433米白云星空儿童票", prize: "75" },
        { cardName: "433米白云星空长者/学生票", prize: "75" },
      ],
    };
  },
  methods: {
    pay(index) {
      let cards = this.cards;
      this.$router.push({
        path: "/orderDetail",
        name: `orderDetail`,
        params: {
          message: cards[index],
        },
      });
    },
    back(){
      this.$router.go(-1)
    }
  },
};
</script>

<style lang="less">
.detail {
  .gray {
    display: block;
    height: 10px;
    background: rgb(240, 242, 245);
    opacity: 0.6;
  }
  .topPic {
    position: relative;
    .ret {
      position: absolute;
      top: 10px;
      left: 10px;
      padding-left: 13px;
      background: rgba(0, 0, 0, 0.3);
      padding: 10px;
      color: white;
      border-radius: 50%;
    }
    .top {
      // width: 100vw;
      height: 206px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      position: absolute;
      bottom: 10px;
      left: 10px;
      color: white;
    }
  }
  .position {
    text-align: left;
    margin: 10px;
    font-size: 14px;
    .mark {
      padding-right: 10px;
    }
    .fl {
      float: right;
    }
  }
  .say {
    background-color: #fff5e5;
    // padding: 10px;
    // color: #ff8300;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .sell {
    .sellTitle {
      margin: 20px 10px;
      text-align: left;
      font-weight: bold;
      font-size: 20px;
    }
    .cards {
      background-color: #f8f8f8;
      margin: 10px;
      border-radius: 5px;
    }
    .card {
      display: flex;
      padding: 15px 5px;
      border-bottom: 1px solid #e0e0e0;
      .left {
        text-align: left;
        margin-left: 10px;
        width: 70%;
        .down span {
          float: left;
          font-size: 12px;
          margin-top: 15px;
          color: #00afc7;
          border: 1px solid #a5e4ec;
          &:last-child {
            margin-left: 10px;
          }
        }
      }
      .right {
        width: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .prize {
          color: orange;
          font-size: 20px;
          .rmb {
            font-size: 12px;
          }
        }
        .server {
          margin-top: 10px;
          width: 60px;
          padding: 5px;
          font-size: 12px;
          border-radius: 30px;
          background-color: orange;
          color: white;
        }
      }
    }
    .no {
      border: none;
    }
  }
  .foot {
    height: 50px;
  }
}
</style>
